<template>
  <div class="wft-app-manager">
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="应用名称">
        <el-input v-model="searchForm.name" placeholder="请输入应用名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row class="margin-bottom-20">
      <el-button type="primary" @click="add">新增</el-button>
    </el-row>
    <el-table :data="data.dataList" border v-loading="data.loading" class="margin-bottom-20">
      <el-table-column show-overflow-tooltip align="center" label="序号" width="80">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        show-overflow-tooltip
        align="center"
        label="应用名称"
      />
      <el-table-column
        prop="code"
        show-overflow-tooltip
        align="center"
        label="应用编码"
      />
      <el-table-column
        prop="creatorUser"
        show-overflow-tooltip
        align="center"
        label="创建人" 
      />
      <el-table-column
        prop="creatorTime"
        show-overflow-tooltip
        align="center"
        label="创建时间" 
      />
      <el-table-column
        prop="status"
        show-overflow-tooltip
        align="center"
        label="发布状态"
      />
      <el-table-column fixed="right" label="操作" align="center" width="350">
        <template #default="scope">
          <el-button text type="primary" size="small" @click="design(scope.row)">设计</el-button>
          <el-button text type="primary" size="small" disabled @click="view(scope.row)">查看</el-button>
          <el-button text type="primary" size="small" disabled @click="edit(scope.row)">编辑</el-button>
          <el-button text type="primary" size="small" disabled @click="del(scope.row)">删除</el-button>
          <el-button text type="primary" size="small" disabled>下载zip</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="data.pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="data.pageSize"
      :total="data.total"
      background
      layout="total, sizes, prev, pager, next, jumper"
    />
    <!-- 应用基础信息 -->
    <BasicForm ref="BasicFormRef" />
    <!-- 应用设计 -->
    <DesignForm ref="DesignFormRef" />
  </div>
</template>
<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue'
import { getDate, getCurrTime } from 'wft-utils'
import BasicForm from './basicForm.vue';
import DesignForm from './designForm.vue';

const searchForm = reactive({
  name: ''
})
const data = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0,
  dataList: [] as Array<any>,
  loading: false,
})

const BasicFormRef = ref<InstanceType<typeof BasicForm>>()
const DesignFormRef = ref<InstanceType<typeof DesignForm>>()

onMounted(() => {
  getDataList()
})
const getDataList = () => {
  setTimeout(() => {
    data.dataList = [
      {
        id: 'app-1',
        name: '应用1',
        code: '001',
        creatorUser: 'wft',
        creatorTime: getDate(0) + ' ' + getCurrTime().currTime,
        status: '未发布'
      }
    ]
    data.total = data.dataList.length
  }, 100)
}
// 每页数
const sizeChangeHandle = (val: number) => {
	data.pageSize = val
	data.pageNo = 1
	getDataList()
}
// 当前页
const currentChangeHandle = (val: number) => {
	data.pageNo = val
	getDataList()
}
// 查询
const search = () => {}
// 重置
const reset = () => {}
// 新增应用
const add = () => {
  BasicFormRef.value?.init('add', '')
}
// 修改
const edit = (row: any) => {
  BasicFormRef.value?.init('edit', row.id)
}
// 查看
const view = (row: any) => {
  BasicFormRef.value?.init('view', row.id)
}
// 删除
const del = (_row: any) => {}
// 设计应用
const design = (row: any) => {
  DesignFormRef?.value?.init(row.id, row.name)
}
</script>
<style scoped>
.wft-app-manager {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.float-right {
  float: right;
}
</style>
<style>
.margin-bottom-20 {
  margin-bottom: 20px;
}
</style>